<template>
    <div class="box6">
        <div class="top">
            <p class="title">热门景区排行</p>
            <p class="bg"></p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        //标题组件
        title: {
            //主标题
            text: '景区排行',
            link: 'http://www.baidu.com',
            //标题的位置
            left: '50%',
            //主标题文字样式
            textStyle: {
                color: 'orange',
                fontSize: 20,
            },
            //子标题
            subtext: '各大景区排行',
            //子标题的样式
            subtextStyle: {
                color: 'orange',
                fontSize: 16,
            },
        },
        xAxis: {
            type: 'category', //图形图标在x轴均匀分布展示
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [10, 18, 36, 40, 20, 80, 100],
                //柱状图的:图形上的文本标签，
                label: {
                    show: true,
                    //文字的位置
                    position: 'insideTop',
                    //文字颜色
                    color: 'orange',
                },
                itemStyle: {
                    borderRadius: [10, 10, 0, 0],
                    //柱条颜色
                    // color: function (data: any) {
                    //     //给每一个柱条这是背景颜色
                    //     let arr = [
                    //         'blue',
                    //         'orange',
                    //         'yellowgreen',
                    //         'gray',
                    //         'white',
                    //         'hotpink',
                    //         'skyblue',
                    //     ]
                    //     return arr[data.dataIndex]
                    // },
                },
            },
            {
                type: 'line',
                data: [10, 18, 36, 40, 20, 80, 100],
                smooth: true, //平滑曲线
            },
        ],
        //布局组件
        grid: {
            left: 20,
            bottom: 20,
            right: 20,
        },
    })
})
</script>

<style scoped lang="scss">
.box6 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;

    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;
        }

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images//dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            margin: 10px 0;
        }
    }

    .charts {
        height: calc(100% - 30px);
    }
}
</style>